import {
  MaterialCommunityIcons,
  Ionicons,
  Feather,
  AntDesign,
  FontAwesome,
  Foundation,
  MaterialIcons,
} from "@expo/vector-icons";
import { TextStyle, StyleProp } from "react-native";
import React from "react";

type SuperIconMapperd =
  | "shopping"
  | "food"
  | "traffic"
  | "game"
  | "archive"
  | "gift"
  | "edu"
  | "health"
  | "warehouse"
  | "bitcoin"
  | "expend"
  | "trophy"
  | "mountains"
  | "enter"
  | "award"
  | "sand"
  | "salary"
  | "empty"
  | "handheart"
  | "billboard"
  | "payment"
  | "";

const SuperIconNames: Record<string, React.ReactElement> = {
  shopping: <MaterialCommunityIcons name={"shopping-outline"} />,
  food: <MaterialCommunityIcons name={"food-fork-drink"} />,
  traffic: <MaterialCommunityIcons name="traffic-light-outline" />,
  game: <Ionicons name={"game-controller-outline"} />,
  archive: <Feather name="archive" />,
  gift: <Feather name={"gift"}></Feather>,
  health: <MaterialCommunityIcons name={"stethoscope"}></MaterialCommunityIcons>,
  edu: <FontAwesome name={"graduation-cap"}></FontAwesome>,
  warehouse: <MaterialCommunityIcons name={"warehouse"}></MaterialCommunityIcons>,
  bitcoin: <FontAwesome name={"bitcoin"}></FontAwesome>,
  expend: <Feather name="shopping-bag" />,

  trophy: <AntDesign name={"Trophy"}></AntDesign>,
  mountains: <Foundation name={"mountains"}></Foundation>,
  enter: <Ionicons name={"enter-outline"}></Ionicons>,
  award: <Feather name={"award"}></Feather>,
  sand: <MaterialCommunityIcons name={"timer-sand"}></MaterialCommunityIcons>,
  salary: <AntDesign name={"pay-circle-o1"}></AntDesign>,
  empty: <MaterialCommunityIcons name={"delete-empty-outline"}></MaterialCommunityIcons>,
  handheart: <MaterialCommunityIcons name={"hand-heart"}></MaterialCommunityIcons>,
  billboard: <MaterialCommunityIcons name={"billboard"}></MaterialCommunityIcons>,
  payment: <MaterialIcons name={"payment"}></MaterialIcons>,
};

interface SuperIconProps {
  name: SuperIconMapperd | string;
  size?: number;
  color?: string;
  style?: StyleProp<TextStyle>;
}

export default function SuperIcon(props: SuperIconProps) {
  const { size, color, style } = props;
  const reactElement = SuperIconNames[props.name];
  if (reactElement) return React.cloneElement(reactElement, { ...{ style }, size, color });
  return null;
}
